// 二次封装axios,引入axios，qs
import axios from 'axios'
// qs序列化字符串，处理发送请求的参数使用qs、工具来处理
/*
方法一：将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）
qs.stringify()转换成查询字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)
方法二：将序列化的内容拆分成一个个单一的对象
qs.parse() 转换成json对象
let comValue = qs.parse(comments)
*/
import qs from 'qs'
import { Toast } from 'vant'
// 导入路由，实现路由跳转
import router from '../router'
import Vue from 'vue'
// 创建一个vue实例
const vue = new Vue()

// 创建一个axios实例，定义request接受
/*
axios.create(config) 对axios请求进行二次封装
根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的
需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样
解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中
*/
const request = axios.create({
  // 设置基础路由地址
  baseURL: '/ccccc',
  // 设置响应超时的事件
  timeout: 8000
})

// 添加请求
request.interceptors.request.use(function (config) {
  // 使用自定义插件，在请求的过程中显示加载的图片
  vue.$showLoading()
  // 处理post请求  application/json问题
  if (config.method === 'post' && config.data) {
    config.data = qs.stringify(config.data)
  }
  // 需要 token接口中请求头中 加token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  vue.$hideLoading()
  return Promise.reject(error)
})
// 和响应拦截器
request.interceptors.response.use(function (response) {
  vue.$hideLoading()
  // 判断token没有传或者过期
  if (response.data.code === 401 || response.data.code === 403) {
    Toast('缺少token，或token过期')
    // 路由跳转到登录页
    router.push('/login')
  }
  return response
}, function (error) {
  vue.$hideLoading()
  return Promise.reject(error)
})
// 导出request
export default request
